<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form size="medium" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="200px">
      <el-divider content-position="left">微信公众号信息</el-divider>
      <el-row class="bg-row" style="background-color: #fff;">
        <el-form-item label="EIMS公网地址" prop="eimsPublicAddress">
          <el-input v-model="dataForm.eimsPublicAddress" placeholder="EIMS公共地址" style="width: 360px;"></el-input>
          <span style="color: red;margin-left: 20px;">* 需以域名形式填写</span>
        </el-form-item>
        <el-form-item label="微信中配置的服务器地址(URL)" prop="wxUrl">
          <el-input v-model="dataForm.wxUrl" placeholder="微信中配置的服务器地址(URL)"></el-input>
        </el-form-item>
        <el-form-item label="token" prop="wxToken">
          <el-input v-model="dataForm.wxToken" placeholder="token" style="width: 180px;"></el-input>
          <span style="color: red;margin-left: 20px;">* 必须与微信公众平台 ==> 开发 ==> 基本配置 ==> 令牌(Token)一致。</span>
        </el-form-item>
      </el-row>


      <el-divider content-position="left">其他配置信息</el-divider>
      <el-row class="bg-row" style="background-color: #fff;">
        <el-form-item label="注册验证方式" prop="verifyMothod" label-width="280px">
          <el-radio-group v-model="dataForm.customerServiceFlag">
            <el-radio :label="1" border>短信验证码(推荐)</el-radio>
            <el-radio :label="2" border>系统生成验证码</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微客服" prop="customerService" label-width="280px">
          <el-radio-group v-model="dataForm.customerServiceFlag">
            <el-radio :label="1" border>微信客服(多客服)</el-radio>
            <el-radio :label="2" border>第三方客服(如：百度商桥)</el-radio>
            <el-radio :label="3" border>专属客服</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="医师评价" prop="evaluation" label-width="280px">
          <el-radio-group v-model="dataForm.customerServiceFlag">
            <el-radio :label="1" border>每人针对一次诊疗信息能评价一次</el-radio>
            <el-radio :label="2" border>每人针对一次诊疗信息能评价多次</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机端配镜单详细页显示" prop="showType" label-width="280px">
          <el-radio-group v-model="dataForm.customerServiceFlag">
            <el-radio :label="1" border>商品名称</el-radio>
            <el-radio :label="2" border>商品类别名称</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否允许手机端配镜支付、诊间支付" prop="phonePayFlag" label-width="280px">
          <el-radio-group v-model="dataForm.phonePayFlag">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
          <span style="color: red;margin-left: 20px;">会员是否可以使用微信对未付款的配镜单进行付款，但不影响查看未付款的配镜单</span>
        </el-form-item>
        <el-form-item label="微信注册时，是否需要填写详细会员信息" prop="customerDetailFlag" label-width="280px">
          <el-radio-group v-model="dataForm.customerDetailFlag">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
          <span style="color: red;margin-left: 20px;">会员是否可以使用微信对未付款的门店挂号单进行付款，但不影响查看未付款的门店挂号单</span>
        </el-form-item>
        <el-form-item label="微信注册后，是否允许修改会员信息" prop="editCustomerFlag" label-width="280px">
          <el-radio-group v-model="dataForm.editCustomerFlag">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微信注册后，是否允许解除绑定的单选项" prop="bindingFlag" label-width="280px">
          <el-radio-group v-model="dataForm.bindingFlag">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预约时，是否允许新建子卡的单选项" prop="affiliatedCardFlag" label-width="280px">
          <el-radio-group v-model="dataForm.affiliatedCardFlag">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="验光前是否确认就诊项目" prop="clinicProjectFlag" label-width="280px">
          <el-radio-group v-model="dataForm.clinicProjectFlag">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微信会员卡号生成方式" prop="cardPrefix" label-width="280px">
          <el-input v-model="dataForm.cardPrefix" placeholder="微信会员卡号自定义前缀(默认为空)" style="width: 360px;">
            <el-select v-model="dataForm.generationMethod" slot="append">
              <el-option label="手机号" value="1"></el-option>
              <el-option label="时间戳" value="2"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="取镜后几天发送推广红包" prop="pushRedEnvelopeDay" label-width="280px">
          <el-input v-model="dataForm.pushRedEnvelopeDay" placeholder="取镜后几天发送推广红包" style="width: 360px;">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="间隔多少分钟发送专属客服聊天提醒通知" prop="interval" label-width="280px">
          <el-input v-model="dataForm.interval" placeholder="间隔多少分钟发送专属客服聊天提醒通知" style="width: 360px;">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item label="微信注册时，默认会员姓名的输入项" prop="defaultNickname" label-width="280px">
          <el-input v-model="dataForm.defaultNickname" placeholder="自定义字符串(默认为空)"></el-input>
        </el-form-item>
        <el-form-item label="关注回复" prop="attentionReply" label-width="280px">
          <el-input v-model="dataForm.attentionReply" placeholder="关注回复"></el-input>
        </el-form-item>
        <el-form-item label="关键词回复" prop="keywordReply" label-width="280px">
          <el-input v-model="dataForm.keywordReply" placeholder="关键词回复"></el-input>
        </el-form-item>
        <el-form-item label="客服上班时间" prop="workTime" label-width="280px">
          <el-input v-model="dataForm.workTime" placeholder="客服上班时间"></el-input>
        </el-form-item>
        <el-form-item label="客服下班时间" prop="timeFromWork" label-width="280px">
          <el-input v-model="dataForm.timeFromWork" placeholder="客服下班时间"></el-input>
        </el-form-item>
        <el-form-item label="下班回复内容" prop="afterWorkReply" label-width="280px">
          <el-input v-model="dataForm.afterWorkReply" placeholder="下班回复内容"></el-input>
        </el-form-item>
      </el-row>


      <el-divider content-position="left">个人中心配置信息</el-divider>
      <el-row class="bg-row" style="background-color: #fff;">
        <el-form-item label="个人中心底部导航栏是否显示" prop="bottomNavigationBar" label-width="280px">
          <el-radio-group v-model="dataForm.bottomNavigationBar">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【我的病例】是否显示" prop="caseFlag" label-width="280px">
          <el-radio-group v-model="dataForm.caseFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【我的资料】是否显示" prop="dataFlag" label-width="280px">
          <el-radio-group v-model="dataForm.dataFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【我的积分】是否显示" prop="integralFlag" label-width="280px">
          <el-radio-group v-model="dataForm.integralFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【消息中心】是否显示" prop="messageCenterFlag" label-width="280px">
          <el-radio-group v-model="dataForm.messageCenterFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【配镜支付】是否显示" prop="glassesPaymentFlag" label-width="280px">
          <el-radio-group v-model="dataForm.glassesPaymentFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【挂号支付】是否显示" prop="registrationPaymentFlag" label-width="280px">
          <el-radio-group v-model="dataForm.registrationPaymentFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【邀请好友】是否显示" prop="inviteFriendsFlag" label-width="280px">
          <el-radio-group v-model="dataForm.inviteFriendsFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【我的代金券】是否显示" prop="vouchersFlag" label-width="280px">
          <el-radio-group v-model="dataForm.vouchersFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【预约挂号】是否显示" prop="appointmentRegistrationFlag" label-width="280px">
          <el-radio-group v-model="dataForm.appointmentRegistrationFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【客户服务】是否显示" prop="customerServiceFlag" label-width="280px">
          <el-radio-group v-model="dataForm.customerServiceFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人中心菜单中【专属客服】是否显示" prop="dedicatedCustomerServiceFlag" label-width="280px">
          <el-radio-group v-model="dataForm.dedicatedCustomerServiceFlag">
            <el-radio :label="1" border>显示</el-radio>
            <el-radio :label="0" border>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { getWxConfigurationObj, addWxConfigurationObj, putWxConfigurationObj } from '@/api/mp/wxconfiguration'

  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          id: 0,
          eimsPublicAddress: '',
          wxUrl: '',
          wxToken: '',
          verifyMothod: '',
          customerService: '',
          evaluation: '',
          showType: '',
          phonePayFlag: '',
          customerDetailFlag: '',
          editCustomerFlag: '',
          bindingFlag: '',
          affiliatedCardFlag: '',
          clinicProjectFlag: '',
          cardPrefix: '',
          generationMethod: '',
          pushRedEnvelopeDay: '',
          interval: '',
          defaultNickname: '',
          attentionReply: '',
          keywordReply: '',
          workTime: '',
          timeFromWork: '',
          afterWorkReply: '',
          bottomNavigationBar: '',
          caseFlag: '',
          dataFlag: '',
          integralFlag: '',
          messageCenterFlag: '',
          glassesPaymentFlag: '',
          registrationPaymentFlag: '',
          inviteFriendsFlag: '',
          vouchersFlag: '',
          appointmentRegistrationFlag: '',
          customerServiceFlag: '',
          dedicatedCustomerServiceFlag: '',
          createTime: '',
          createUser: '',
          updateTime: '',
          updateUser: '',
          delFlag: '',
          tenantId: ''
        },
        dataRule: {
          eimsPublicAddress: [{required: true,message: 'EIMS公共地址不能为空',trigger: 'blur'}],
          wxUrl: [{required: true,message: '微信中配置的服务器地址(URL)不能为空',trigger: 'blur'}],
          wxToken: [{required: true,message: 'token不能为空',trigger: 'blur'}],
          verifyMothod: [{required: true,message: '注册验证方式(1-短信验证码(推荐),2-系统生成验证码)不能为空',trigger: 'blur'}],
          customerService: [{required: true,message: '微客服(1-微信客服(多客服),2-第三方客服(如：百度商桥))不能为空',trigger: 'blur'}],
          evaluation: [{required: true,message: '医师评价(1-每人针对一次诊疗信息能评价一次,2-每人针对一次诊疗信息能评价多次)不能为空',trigger: 'blur'}],
          showType: [{required: true,message: '手机端配镜单详细页显示(1-商品名称,2-商品类别名称)不能为空',trigger: 'blur'}],
          phonePayFlag: [{required: true,message: '是否允许手机端配镜支付、诊间支付(1-是,0-否)不能为空',trigger: 'blur'}],
          customerDetailFlag: [{required: true,message: '微信注册时，是否需要填写详细会员信息(1-是,0-否)不能为空',trigger: 'blur'}],
          editCustomerFlag: [{required: true,message: '微信注册后，是否允许修改会员信息(1-是,0-否)不能为空',trigger: 'blur'}],
          bindingFlag: [{required: true,message: '微信注册后，是否允许解除绑定的单选项(1-是,0-否)不能为空',trigger: 'blur'}],
          affiliatedCardFlag: [{required: true,message: '预约时，是否允许新建子卡的单选项(1-是,0-否)不能为空',trigger: 'blur'}],
          clinicProjectFlag: [{required: true,message: '验光前是否确认就诊项目(1-是,0-否)不能为空',trigger: 'blur'}],
          cardPrefix: [{required: true,message: '微信会员卡号自定义前缀(默认为空)不能为空',trigger: 'blur'}],
          generationMethod: [{required: true,message: '微信会员卡号生成方式(1-手机号,2-时间戳)不能为空',trigger: 'blur'}],
          pushRedEnvelopeDay: [{required: true,message: '取镜后几天发送推广红包不能为空',trigger: 'blur'}],
          interval: [{required: true,message: '间隔多少分钟发送专属客服聊天提醒通知不能为空',trigger: 'blur'}],
          defaultNickname: [{required: true,message: '微信注册时，默认会员姓名的输入项(默认为空)不能为空',trigger: 'blur'}],
          attentionReply: [{required: true,message: '关注回复不能为空',trigger: 'blur'}],
          keywordReply: [{required: true,message: '关键词回复不能为空',trigger: 'blur'}],
          workTime: [{required: true,message: '客服上班时间不能为空',trigger: 'blur'}],
          timeFromWork: [{required: true,message: '客服下班时间不能为空',trigger: 'blur'}],
          afterWorkReply: [{required: true,message: '下班回复内容不能为空',trigger: 'blur'}],
          bottomNavigationBar: [{required: true,message: '个人中心底部导航栏是否显示(1-显示,0-隐藏)不能为空',trigger: 'blur'}],
          caseFlag: [{ required: true, message: '个人中心菜单中【我的病例】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur'}],
          dataFlag: [{required: true, message: '个人中心菜单中【我的资料】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur'}],
          integralFlag: [{required: true, message: '个人中心菜单中【我的积分】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur'}],
          messageCenterFlag: [{ required: true, message: '个人中心菜单中【消息中心】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur' }],
          glassesPaymentFlag: [{ required: true, message: '个人中心菜单中【配镜支付】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur' }],
          registrationPaymentFlag: [{required: true,message: '个人中心菜单中【挂号支付】是否显示(1-显示,0-隐藏)不能为空',trigger: 'blur'}],
          inviteFriendsFlag: [{ required: true, message: '个人中心菜单中【邀请好友】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur' }],
          vouchersFlag: [{ required: true, message: '个人中心菜单中【我的代金券】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur' }],
          appointmentRegistrationFlag: [{ required: true, message: '个人中心菜单中【预约挂号】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur' }],
          customerServiceFlag: [{ required: true, message: '个人中心菜单中【客户服务】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur' }],
          dedicatedCustomerServiceFlag: [{ required: true, message: '个人中心菜单中【专属客服】是否显示(1-显示,0-隐藏)不能为空', trigger: 'blur' }]
        }
      }
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getWxConfigurationObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              putWxConfigurationObj(this.dataForm).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
              });
            } else {
              addWxConfigurationObj(this.dataForm).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-select {
    width: 80px;
  }
</style>
